<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb style="padding-bottom:15px " separator="/">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    页面内容-->
    <el-card>
      <!--    搜索头部-->
      <el-row :gutter="40" style="padding-bottom: 15px">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @keyup.enter.native="Search"
                    clearable>
            <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="addItem_info">添加项目</el-button>
        </el-col>
        <el-col :span="4" style="  position:absolute; left:90%;">
          <el-button type="primary" icon="el-icon-refresh-right" @click="getItem_infoList"></el-button>
        </el-col>
      </el-row>
      <!--      渲染数据表格fr-->
      <el-table
          :data="Item_infoList.data"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            width="40">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="u_name"-->
<!--            label="姓名"-->
<!--            width="180">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="title"
            label="项目名称"
            width="300">
        </el-table-column>
        <el-table-column
            prop="picture"
            label="图片"
            width="300">
        </el-table-column>
        <el-table-column
            prop="author"
            label="工作负责人"
            width="300">
        </el-table-column>
          <el-table-column
                  prop="time"
                  label="时间"
                  width="300">
          </el-table-column>

        <el-table-column
            prop="id"
            label="操作"
            width="318">
          <div slot-scope="scope">
<!--                        <el-tooltip class="item" effect="dark" content="查看" placement="top">-->
<!--                          <el-button icon="el-icon-search" size="mini"></el-button>-->
<!--                        </el-tooltip>-->
            <el-button type="primary" size="mini" @click="updateItem_info(scope.row)">查看/编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteItem_info(scope.row)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <!--      分页控件-->
      <el-pagination
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Item_infoList.count">
      </el-pagination>
      <!--      编辑用户dialog对话框-->
      <el-dialog
          title="编辑用户"
          :visible.sync="dialogUpdateItem_info"
          width="30%">
        <!--        内容区域-->
        <el-form :model="UpdateItem_infoList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<!--          <el-form-item label="姓名">-->
<!--            <el-input v-model="UpdateUserList.u_name" disabled></el-input>-->
<!--          </el-form-item>-->

            <el-form-item label="项目名称" prop="title">
                <el-input v-model="UpdateItem_infoList.title" disabled></el-input>
            </el-form-item>
          <el-form-item label="图片" prop="picture">
            <el-input v-model="UpdateItem_infoList.picture" disabled></el-input>
          </el-form-item>
          <el-form-item label="工作人员" prop="author">
            <el-input v-model="UpdateItem_infoList.author"></el-input>
          </el-form-item>
            <el-form-item label="时间" prop="time">
                <el-input v-model="UpdateItem_infoList.time"></el-input>
            </el-form-item>


<!--          <el-form-item label="身份证号" prop="user_id">-->
<!--            <el-input v-model="UpdateUserList.user_id"></el-input>-->
<!--          </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdateItem_info = false">取 消</el-button>
    <el-button type="primary" @click="updateItem_info1">保 存</el-button>
  </span>
      </el-dialog>
      <el-dialog
          title="添加用户"
          :visible.sync="dialogAddItem_info"
          width="30%">
        <!--        内容区域-->
        <el-form :model="AddItem_infoList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!--          <el-form-item label="姓名">-->
          <!--            <el-input v-model="UpdateUserList.u_name" disabled></el-input>-->
          <!--          </el-form-item>-->


          <el-form-item label="项目名称" prop="title">
            <el-input v-model="AddItem_infoList.title" ></el-input>
          </el-form-item>
          <el-form-item label="图片" prop="picture">
            <el-input v-model="AddItem_infoList.picture" ></el-input>
          </el-form-item>
          <el-form-item label="工作人员" prop="author">
            <el-input v-model="AddItem_infoList.author"></el-input>
          </el-form-item>
          <el-form-item label="时间" prop="time">
            <el-input v-model="AddItem_infoList.time"></el-input>
          </el-form-item>

          <el-button type="primary" @click="addItem_info1" class="a">添 加</el-button>
        </el-form>

      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Item_info",
  //数据
  data() {
    return {
      input3: null,
      page: 1,
      limit: 10,
      Item_infoList: [],
      UpdateItem_infoList: {
        id: '',

      },
      AddItem_infoList:{
        title: "",
        picture: "",
        author: "",
        time: "",

      },
      dialogAddItem_info: false,
      dialogUpdateItem_info: false,

    }
  },
  //方法
  methods: {
    //添加
    addItem_info(){
      this.dialogAddItem_info = !this.dialogAddItem_info
    },
    addItem_info1(){
      this.dialogAddItem_info = !this.dialogAddItem_info
          this.$http.get("/Item_infoController/addItem_info", {
            params: {
              title: this.AddItem_infoList.title,
              picture: this.AddItem_infoList.picture,
              author: this.AddItem_infoList.author,
              time: this.AddItem_infoList.time,

            }
          }).then((res) => {
            console.log(res)
            this.Item_infoList = res.data;
            if (res.data.code === 1) {
              this.$message.success("添加成功")
              this.getItem_infoList();
            } else this.$message.error("添加失败")
          })
    },
    //关键字搜索
    Search() {
      console.log(this.input3)
      this.$http.get("/Item_infoController/selectWhereItem_info", {
        params: {
          page: 1,
          limit: 10,
          Keyword: this.input3,
        }
      }).then((res) => {
        console.log(res.data)
        this.Item_infoList = res.data;
        if (res.data.code === 1) {
          this.$message.success("搜索成功")
        } else this.$message.error("搜索失败")
      })
    },
    //请求查看用户列表数据
    getItem_infoList() {
      this.$http.get("/Item_infoController/queryItem_info", {
        params: {
          page: this.page,
          limit: this.limit,
        }
      }).then((res) => {
        // console.log(res)
        this.Item_infoList = res.data;
        if (res.data.code === 1) {
          // this.$message.success("请求成功")
        } else this.$message.error("请求失败")
      })
    },
    //编辑按钮事件
    updateItem_info(row) {
      this.dialogUpdateItem_info = !this.dialogUpdateItem_info
      this.UpdateItem_infoList = row;
      console.log(this.UpdateItem_infoList)
    },
    //确定编辑事件
    updateItem_info1() {
      this.dialogUpdateItem_info = !this.dialogUpdateItem_info
          this.$http.get("/Item_infoController/updataItem_info", {
            params: {
             // user: this.UpdateUserList,
              id: this.UpdateItem_infoList.id,
              title: this.UpdateItem_infoList.title,
              picture: this.UpdateItem_infoList.picture,
              author: this.UpdateItem_infoList.author,
              time: this.UpdateItem_infoList.time,
            }
          }).then((res) => {
            console.log(res)
            this.Item_infoList = res.data;
            if (res.data.code === 1) {
              this.$message.success("保存成功")
              this.getItem_infoList();
            } else this.$message.error("保存失败")
          })
    },
    //删除按钮事件
    deleteItem_info(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("/Item_infoController/deleteItem_info", {
          params: {
            id: row.id,
          }
        }).then((res) => {
          console.log(res)
          if (res.data.code === 1) {
            this.$message.success("删除成功")
            this.getItem_infoList();
          } else this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页条数发生改变时触发
    SizeChange(limit) {
      this.limit = limit;
      this.getItem_infoList();
    },
    //页码发生改变时触发
    CurrentChange(page) {
      this.page = page;
      this.getItem_infoList();
    },
  },
  //  钩子函数
  created() {
    this.getItem_infoList();
  }
}
</script>

<style scoped>
.a{
  margin-left: 360px;
  margin-top: 20px;
}
</style>
